JS - Objecten - maken

Declaratieve vorm

De declaratieve vorm ziet er zo uit:

var myObj = {
   key : value
   // ...
};

We beginnen met een eenvoudig voorbeeld:

var persoon = {
   voornaam: 'Jef',
   familienaam: 'Inghelbrecht',
   straat: 'Rue des Blancs Manteaux 38',
   stad: 'Paris',
   postcode: '75001',
   geslacht: 'man'
};

Je ziet dat:

• de naam van de variabele die naar het object verwijst is persoon;
• in plaats van vierkante haken, die je met arrays gebruikt, gebruik je accolades;
• je onderscheidt de elementen, genaamd eigenschappen, in het object met komma's;
• om een waarde aan een sleutel toe te kennen gebruik je een : en geen =;

De namen van de eigenschappen - van nu af aan spreken we niet meer van sleutels maar van eigenschappen - kan je tussen enkele of dubbele aanhalingstekens plaatsen:

var persoon = {
   voornaam: 'Jef',
   'familienaam': 'Inghelbrecht',
   "straat": 'Rue des Blancs Manteaux 38',
};

Je plaatst eigenschappen tussen aanhalingstekens enkel en alleen als:

• de naam van de eigenschap is een gereserveerd woord in JavaScript;
• als er een spatie zit in de naam van de eigenschap;
• als de naam van de eigenschap begint met een getal;

In alle andere gevallen is dat alleen maar meer typwerk.

Vermits functies ook gegevens zijn kan je aan een property de waarde van een functie toekennen:

naam: function() {return this.voornaam + ' ' + this.familienaam;}

Je kan ook de stenonotatie gebruiken om een 'literal object' te creëren:

var firstName = 'Alexander';
var lastName = 'De Grote';

// vroeger:
var person = {
    firstName: firstName,
    lastName: lastName
};

// nu:
var person2 = {firstName, lastName};

console.log(person);
console.log(person2);

// output voor beide:
// Object { firstName: "Alexander", lastName: "De Grote" }

Je kan ook de stenonotatie gebruiken om methoden te definiëren in 'object literals':

// stenonotatie om methoden in 'object literals' te maken
// vroeger:
var person3 = {
    firstName,
    lastName,
    name: function() { return firstName + ' ' + lastName},
    uName: function() { return (firstName + ' ' + lastName).tUpperCase()}
};

// nu:
var person4 = {
    firstName,
    lastName,
    name() { return this.firstName + ' ' + this.lastName},
    uName() { return (this.firstName + ' ' + this.lastName).toUpperCase()}
};

console.log(person3.name());
console.log(person4.uName());

// output
//  "Alexander De Grote"
//  "ALEXANDER DE GROTE"

In 'object literals' kan je de namen van eigenschappen ook dynamisch instellen. In het volgende code voorbeeld wordt de naam eigenschap voor een object dynamisch met behulp van de set syntax ingesteld:

// The following code example creates a property name
// for an object dynamically using the set syntax.
var propertySetFirstName = 'setFirstName';
var propertySetLastName = 'setLastName';
var person5 = {
    firstName,
    lastName,
    set [propertySetFirstName](value) { this.firstName = value;},
    set [propertySetLastName](value) { this.lastName = value;},
    name() { return this.firstName + ' ' + this.lastName},
    uName() { return (this.firstName + ' ' + this.lastName).toUpperCase()}
};
console.log(person5.name());
console.log(person5.uName());
person5.setFirstName = 'Jules';
person5.setLastName = 'Caeser';
console.log(person5.name());
console.log(person5.uName());

// output
// "Alexander De Grote"
// "ALEXANDER DE GROTE"
// "Jules Caeser"
// "JULES CAESER"

In het volgende code voorbeeld wordt een naam van een eigenschap voor een object dynamisch met behulp van de get syntax aangemaakt:

// The following code example creates a property name
// for an object dynamically using the get syntax.
var propertySetFirstName = 'setFirstName';
var propertySetLastName = 'setLastName';
var propertyGetLowerName = 'lName';
var person6 = {
    firstName,
    lastName,
    set [propertySetFirstName](value) { this.firstName = value;},
    set [propertySetLastName](value) { this.lastName = value;},
    name() { return this.firstName + ' ' + this.lastName},
    uName() { return (this.firstName + ' ' + this.lastName).toUpperCase()},
    get [propertyGetLowerName] () {return (this.firstName + ' ' + this.lastName).toLowerCase()}
};
console.log(person6.lName);

// output
// "alexander de grote"

Meer info op Defining Getters and Setters in MDN JavaScript Guide.

Een overzicht van de voorbeelden hierboven. Open de Console door op de Console knop te klikken rechtsonder:

See the Pen JS - create object by Jef Inghelbrecht (@jef) on CodePen.

De ingebouwe constructor functie

Als een object met de letterlijke notatie (literal) wordt gemaakt is zijn constructor de ingebouwde Object() constructor functie:

var o = {};
o.constructor;
function Object() { [native code] }

typeof o.constructor;
   "function"

Een lijst van ingebouwde constructor functies

var object = new Object();    // een nieuw Object object
var string = new String();    // een nieuw String object
var number = new Number();    // een nieuw Number object
var bool = new Boolean();   // een nieuw Boolean object
var array = new Array();     // een nieuw Array object
var regex = new RegExp();    // een nieuw RegExp object
var function = new Function();  //een nieuwe Function object
var date = new Date();      // een nieuw Date object

Geconstrueerde vorm

De geconstrueerde vorm ziet er zo uit:

var myObj = new Object ();
myObj.key = value;

De geconstrueerde vorm en de letterlijke vorm maken precies hetzelfde soort object. Het enige verschil is dat je één of meerdere sleutel/waarde paren kan toevoegen aan de letterlijke declaratie, terwijl bij geconstrueerde vorm, je de eigenschappen één voor één op een rijtje aan het object moet toevoegen.

Het is zeer ongewoon om de "geconstrueerde vorm" te gebruiken voor het maken van objecten. Meestal wordt de letterlijke syntaxis gebruikt. Hetzelfde geldt voor de meeste van de ingebouwde objecten (later toegelicht).

Tip

Er is geen reden om de new Object() syntax te gebruiken om een object te maken. Gebruik omwille van leesbaarheid en snelheid van uitvoering de declaratieve vorm.

Voorbeeld

Ingebouwde methoden

Elk object beschikt over een aantal ingebouwde methode.

See the Pen JavaScript - Objecten - Ingebouwde methoden by Jef Inghelbrecht (@jef) on CodePen.

Objecten zijn 'mutable'

Mutable of veranderlijk is een andere manier om te zeggen dat objecten by reference zijn en niet by value. Gegeven:

var persoon = [];
persoon['voornaam'] = 'Jef';
persoon['familienaam'] = 'Inghelbrecht';
persoon['straat'] = 'Rue des Blancs Manteaux 38';
persoon['stad'] = 'Paris'; 
persoon['postcode'] = '75001';
persoon['geslacht'] = 'man';
persoon['naam'] =  function() {return this.voornaam + ' ' + this.familienaam;}

Het volgende statement maakt geen kopie van het object persoon:

var jef = persoon;

Het volgende statement wijzigt zowel het object jef als het object persoon:

jef.straat = 'Rue des Verts Pantalons 20';

See the Pen JavaScript - Objecten zijn veranderlijk by Jef Inghelbrecht (@jef) on CodePen.

Wanneer je een object aan een functie als argument doorgeeft, geef je alleen een verwijzing naar dat object door. Als je dus een wijziging aanbrengt aan het object binnenin de functie - dat slechts een verwijzing is naar het doorgegeven object, wijzig je het oorspronkelijke object.

Een vergelijking tussen twee referenties naar het zelfde object retourneert true.

var origineel_persoon = {voornaam: 'David'};
var copy_persoon = origineel_persoon;
copy_persoon.voornaam = 'Liesbeth';

origineel_persoon === copy_persoon;
true

Beperkingen van objecten

De voorbeelden hierboven zijn te beperkt in vele situaties. Je kan slechts één enkel object van dat type maken. Zoals je in het voorbeeld in CodePen kan zien moeten we de methode naam in beide objecten herhalen. Het zou efficiënter zijn als we deze methode kunnen laten delen door alle exemplaren of instanties van één hetzelfde object, m.a.w. als over de mogelijkheid van een klasse te maken zouden beschikken.

Soms is het nodig om meerdere exemplaren van één het zelfde object te maken. In de voorbeelden in CodePen zou Jef en Kees exemplaren of instanties moeten kunnen zijn van het object persoon.